<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>按钮</button>
  </body>
</html>

<script type="module">
  //   模块化具有后解析的功能，就是最后才执行，并且默认是严格模式，模块也有它独立的作用域
  //   import { title as a } from "./module.js";
  //   console.log(a);

  //   import * as api from "./module.js"; // 使用这种方式导出将所有导出到一个api对象中的意思，这种方法叫批量导入，建议还是使用哪个导入哪个
  //   console.log(api.o1.lessons);

  //   import obj, { title } from "./module.js"; // 一个默认一个具名
  //   console.log(obj.data);

  //   按需加载动态。可以放到有需要用的地方
  if (false) {
    import("./module.js").then(({ title, o1 }) => {
      console.log(title, o1);
    }); // 按需加载，会返回一个promise对象
  }
</script>
